import * as React from 'react';
import {forwardRef, useState} from 'react';
import './index.scss';

export interface SecurityIncidentStatusProps {
  width?: string | number;
  height?: string | number;
  title?: string;
  subtitle?: string;
  modules?: {
    title: string;
    dataItems: {
      label: string;
      value: number | string;
      unit?: string;
    }[];
  }[];
  onClick?: () => void;
  theme?: 'light' | 'dark';
  style?: React.CSSProperties;
  className?: string;
}

const SecurityIncidentStatus = forwardRef<HTMLDivElement, SecurityIncidentStatusProps>((props, ref) => {
  const {
    width = 510,
    height = 402,
    title = '重点治安事件状态',
    subtitle = 'Status of major public security incidents',
    tabs = [
      { id: '1', text: '当日', isActive: true },
      { id: '2', text: '近七日', isActive: false }
    ],
    modules = [
      {
        title: '重点管理',
        type: 'line',
        dataItems: [
          { label: '重点人员', value: 99, unit: '人' },
          { label: '个人极端事件', value: 36, unit: '件' },
          { label: '群体事件', value: 2, unit: '件' },
          { label: '暴力案事件', value: 99, unit: '件' }
        ],
      },
      {
        title: '日常管理',
        type: 'tab',
        dataItems: [
          { label: '投诉举报', value: 278 },
          { label: '110警情', value: 78 },
          { label: '案件', value: 20 },
          { label: '投诉举报', value: 278 },
          { label: '110警情', value: 78 },
          { label: '案件', value: 20 }
        ]
      },
      {
        title: '非法接拉客管理',
        type: 'icon',
        dataItems: [
          { label: '发现', value: 78, unit: '个' },
          { label: '劝导', value: 78, unit: '个' },
          { label: '处置', value: 78, unit: '个' },
        ]
      },
      {
        title: '无证营运车辆管理',
        type: 'icon-two',
        dataItems: [
          { label: '外围街道预警数', value: 78, unit: '个' },
          { label: '场库告警数', value: 78, unit: '个' }
        ]
      }
    ],
    onClick,
    style = {},
    className = '',
    ...otherProps
  } = props;
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const componentStyle: React.CSSProperties = {
    width: width,
    height: height,
    ...style
  };
  const handleTabClick = (tab, index) => {
    setActiveTabIndex(index)
  }

  return (
    <div
      ref={ref}
      className={['hzdz-security-incident-status', className].filter(Boolean).join(' ')}
      style={componentStyle}
      onClick={onClick}
      {...otherProps}
    >
      {/* 头部区域 */}
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>

      {/* 管理模块区域 */}
      <div className="content-wrap">
        {modules.map((module, moduleIndex) => (
          <div key={moduleIndex} className="content-item">
            <div className="item-head">
              <div className="head-round" style={{backgroundImage: 'url(static/images/zonghezhifa/point-icon-blue.png)'}} />
              <div className="head-title">{module.title}</div>
              <div className="head-line" />
              <div className="head-right" style={{backgroundImage: 'url(static/images/zonghezhifa/left-icon-blue.png)'}} />
              {module.type == 'tab' && (
                <div className="tab-selector">
                  {tabs.map((tab, index) => (
                    <div
                      key={tab.id}
                      className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
                      onClick={() => handleTabClick(tab, index)}
                    >
                      {tab.text}
                    </div>
                  ))}
                </div>
              )}
              {(module.type == 'icon' || module.type == 'icon-two') && (
                <div className="plus-icon" style={{backgroundImage: 'url(static/images/zonghezhifa/plus-icon.png)'}} />
              )}
            </div>
            <div className="data-wrap">
              {module.dataItems.map((item, moduleIndex) => (
                <div className={module.type == 'line' ? 'vertical-data-item' : 'transverse-data-item'}
                     style={{width: module.type == 'line' ? 'calc(100% / 4)' : module.type == 'icon-two' ? 'calc(100% / 2)' : 'calc(100% / 3)'}}>
                  <div>{item.label}</div>
                  <div className="value">
                    <div className="value-bg">
                      <div>{item.value}</div>
                      <span style={{
                        fontSize: module.type == 'line' ? '12px' : '14px',
                        paddingBottom: '5px',
                        maxWidth: item.unit ? '70px' : '60px'}}>{item.unit ? item.unit : ''}</span>
                    </div>

                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="bottom-line" />
    </div>
  );
});

SecurityIncidentStatus.displayName = 'SecurityIncidentStatus';

export default SecurityIncidentStatus;
